<template>
  <div class="notice-console">
    <van-nav-bar title="公告"/>
    <van-empty
      v-if="spotNoticeList.length === 0"
      description="暂无公告"
    />
    <van-cell
      v-for="(item, index) in spotNoticeList"
      :key="index"
    >
      <template #title>
        <div class="notice-item">
          <div>标题：{{ item.title }}</div>
          <div>内容：{{ item.content }}</div>
          <div>更新时间：{{ item.updatedTime }}</div>
        </div>
      </template>
    </van-cell>
    <van-back-top
      right="5%"
      bottom="80px"
    />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getNoticeList } from '@/api/notice.js'

const spotNoticeList = ref([])

const loadSpotNoticeList = async () => {
  const res = await getNoticeList()
  if (res?.code === 0) {
    spotNoticeList.value = res.data
  }
}

onMounted(() => {
  loadSpotNoticeList()
})

</script>

<style scoped>
.notice-console {
  /* 添加换行样式 */
  .notice-item div {
    line-height: 1.5;
    margin-bottom: 4px;
  }
}
</style>